<!-- 家庭档案列表组件 -->
<template>
  <div class="family-archive-list">
    <!-- 搜索区域 -->
    <div class="search-area mb-4 flex items-center gap-4">
      <el-input
        v-model="searchForm.name"
        :placeholder="t('healthRecords.placeholders.searchUser')"
        class="w-64"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

      <el-select
        v-model="searchForm.attentionType"
        :placeholder="t('healthRecords.placeholders.selectAttention')"
        clearable
        class="w-48"
      >
        <el-option
          v-for="item in attentionTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>

      <el-button type="primary" @click="handleSearch">
        <el-icon class="mr-1"><Search /></el-icon
        >{{ t("healthRecords.search.search") }}
      </el-button>

      <el-button type="primary" @click="handleReset">
        <el-icon class="mr-1"><Refresh /></el-icon
        >{{ t("healthRecords.search.reset") }}
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      :element-loading-text="t('healthRecords.loading.fetching')"
    >
      <el-table-column
        prop="familyId"
        :label="t('healthRecords.table.familyId')"
      />
      <el-table-column
        prop="executiveName"
        :label="t('healthRecords.table.executiveName')"
      />
      <el-table-column
        prop="familyMemberCount"
        :label="t('healthRecords.table.familyMemberCount')"
        width="100"
        align="center"
      />
      <el-table-column
        prop="familyMemberName"
        :label="t('healthRecords.table.familyMember')"
        min-width="200"
      />

      <el-table-column
        :label="t('healthRecords.table.attentionLevel')"
        align="center"
      >
        <template #default="{ row }">
          <EditableRate
            v-model="row.specialAttentionLevel"
            :data-type="3"
            :data-id="row.familyId"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="createDate"
        :label="t('healthRecords.table.createDate')"
        :formatter="formatDate"
      />

      <el-table-column
        :label="t('healthRecords.table.actions')"
        fixed="right"
        width="120"
      >
        <template #default="{ row }">
          <el-button type="primary" link @click="handleViewFamily(row)">
            {{ t("healthRecords.actions.viewFamily") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex justify-end mt-4">
      <el-pagination
        v-model:current-page="searchForm.pageNum"
        v-model:page-size="searchForm.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { healthApi } from "@/api/health";
import router from "@/router";
import { attentionTypeList as commonAttentionTypeList } from "@/utils/tools";
import { Refresh, Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

// 国际化
const { t } = useI18n();

interface SearchFormType {
  pageNum: number;
  pageSize: number;
  name?: string;
  attentionType?: number | null;
}

// 搜索表单数据
const searchForm = reactive<SearchFormType>({
  pageNum: 1,
  pageSize: 10,
  name: "",
  attentionType: null
});

const attentionTypeList = ref(commonAttentionTypeList);

interface FamilyArchiveItem {
  familyId?: number;
  executiveName?: string;
  familyMemberCount?: number;
  familyMemberName?: string;
  specialAttentionLevel?: number;
  createDate?: string;
}

// 表格数据
const tableData = ref<FamilyArchiveItem[]>([]);

// 加载状态
const loading = ref(false);

// 总条数
const total = ref(0);

// 格式化日期
const formatDate = (row: FamilyArchiveItem) => {
  return row.createDate ? dayjs(row.createDate).format("YYYY-MM-DD") : "";
};

// 分页大小改变
const handleSizeChange = (val: number) => {
  searchForm.pageSize = val;
  searchForm.pageNum = 1;
  getFamilyArchiveList();
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  searchForm.pageNum = val;
  getFamilyArchiveList();
};

// 获取家庭档案列表
const getFamilyArchiveList = async () => {
  try {
    loading.value = true;
    const response = await healthApi.getHealthArchiveFamilySearch(searchForm);
    if (response.code === 0 && response.data) {
      tableData.value = response.data.list || [];
      total.value = response.data.total || 0;
      // 同步当前页码和每页条数
      searchForm.pageNum = response.data.pageNum;
      searchForm.pageSize = response.data.pageSize;
    } else {
      ElMessage.error(
        response.message || t("healthRecords.messages.fetchFamilyArchiveFailed")
      );
    }
  } catch (error) {
    console.error("获取家庭档案失败:", error);
    ElMessage.error(t("healthRecords.messages.fetchFamilyArchiveFailed"));
  } finally {
    loading.value = false;
  }
};

// 搜索方法
const handleSearch = async () => {
  try {
    searchForm.pageNum = 1;
    await getFamilyArchiveList();
  } catch (error) {
    console.error("搜索失败:", error);
    ElMessage.error(t("healthRecords.messages.searchFailed"));
  }
};

// 重置方法
const handleReset = async () => {
  searchForm.name = "";
  searchForm.attentionType = null;
  searchForm.pageNum = 1;

  try {
    await getFamilyArchiveList();
  } catch (error) {
    console.error("重置失败:", error);
    ElMessage.error(t("healthRecords.messages.resetFailed"));
  }
};

// 查看家庭档案
const handleViewFamily = (row: FamilyArchiveItem) => {
  router.push({
    path: "/healthRecords/detail",
    query: {
      familyId: row.familyId
    }
  });
};

onMounted(() => {
  getFamilyArchiveList();
});
</script>

<style lang="scss" scoped>
.family-archive-list {
  width: 100%;

  :deep(.el-table) {
    // 设置表格内容文字大小
    font-size: 14px;

    // 设置表头样式
    .el-table__header {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
      }
    }

    // 设置单元格样式
    .el-table__row {
      td {
        padding: 8px 0;
      }
    }
  }

  // 设置评分组件样式
  :deep(.el-rate) {
    display: inline-flex;
    justify-content: center;

    .el-rate__item {
      margin-right: 4px;
    }
  }
}
</style>
